<template>
  <div
    style="
      background-color: white;
      border: 1px solid grey;
      border-radius: 5px;
      height: 600px;
      overflow: scroll;
    "
  >
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>呼和浩特发展与改革委员会平台</el-breadcrumb-item>
      <el-breadcrumb-item>公示信息</el-breadcrumb-item>
    </el-breadcrumb>
    <el-tabs
      v-model="activeName"
      @tab-click="handleClick"
      style="margin-left: 200px; margin-right: 200px"
    >
      <el-tab-pane label="审核批准信息公示" name="first">
        <span>
          项目名称：<input
            type="text"
            v-model="searchName"
            placeholder="请输入项目名称"
            style="width: 300px; height: 30px; margin-right: 50px"
          />
          项目编号：<input
            type="text"
            v-model="searchNo"
            placeholder="请输入项目编号"
            style="width: 300px; height: 30px; margin-right: 50px"
          />
          <el-button type="primary" size="medium" @click="btnS">搜索</el-button>
        </span>
        <el-table
          class="el-table--scrollable-y"
          :data="
            userList1.slice(
              (currentPage - 1) * pagesize,
              currentPage * pagesize
            )
          "
          style="width: 100%"
        >
          <el-table-column
            fixed
            prop="projectNo"
            label="项目编号"
            width="100"
            style="height: 50px"
          >
          </el-table-column>
          <el-table-column prop="enterpriseId" label="企业标识" width="150">
          </el-table-column>
          <el-table-column prop="projectType" label="项目类型" width="150">
          </el-table-column>
          <el-table-column prop="investment" label="投资" width="150">
          </el-table-column>
          <el-table-column prop="revenue" label="收益" width="150">
          </el-table-column>
          <el-table-column prop="startTime" label="开始时间" width="150">
          </el-table-column>
          <el-table-column prop="lifeCycle" label="生命周期" width="150">
          </el-table-column>
          <el-table-column
            prop="projectAssignmentPaper"
            label="项目任务书"
            width="150"
          >
          </el-table-column>
          <el-table-column prop="specificType" label="特定类型" width="150">
          </el-table-column>
          <el-table-column prop="projectAddress" label="项目地址" width="150">
          </el-table-column>
          <el-table-column prop="auditStatus" label="审核身份" width="150">
          </el-table-column>
          <el-table-column prop="reviewer" label="评论家" width="150">
          </el-table-column>
          <el-table-column prop="revenueAnalysis" label="收益分析" width="150">
          </el-table-column>
          <el-table-column prop="auditTime" label="审核时间" width="150">
          </el-table-column>
          <el-table-column prop="applyName" label="应用名称" width="150">
          </el-table-column>
          <el-table-column prop="auditOpinion" label="审计意见" width="150">
          </el-table-column>
        </el-table>
        <div class="block" style="margin-top: 20px; margin-left: 300px">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="userList1.length"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="五年项目信息公示" name="second">
        <span>
          项目类型：<input
            type="text"
            v-model="searchType2"
            placeholder="请输入项目类型"
            style="width: 300px; height: 30px; margin-right: 50px"
          />
          项目编号：<input
            type="text"
            v-model="searchNo2"
            placeholder="请输入项目编号"
            style="width: 300px; height: 30px; margin-right: 50px"
          />
          <el-button type="primary" size="medium" @click="btnS2"
            >搜索</el-button
          >
        </span>
        <el-table
          class="el-table--scrollable-y"
          :data="
            userList2.slice(
              (currentPage - 1) * pagesize,
              currentPage * pagesize
            )
          "
          style="width: 100%; height=250;"
        >
          <el-table-column
            fixed
            prop="fiveProjectNo"
            label="五年项目编号"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="fiveProjectType"
            label="五年项目类型"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="fiveSpecificType"
            label="五年项目特定类型"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="fiveInvestment"
            label="五年项目投资"
            width="150"
          >
          </el-table-column>
          <el-table-column prop="fiveRevenue" label="五年项目收益" width="150">
          </el-table-column>
          <el-table-column
            prop="fiveStartTime"
            label="五年项目开始时间"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="fiveLifeCycle"
            label="五年项目生命周期"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="fiveProjectAddress"
            label="五年项目地址"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="fiveProjectAssignmentPaper"
            label="五年项目任务书"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="fiveRevenueAnalysis"
            label="五年项目收益分析"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="fiveConstructionStatus"
            label="五年项目创建身份"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="fiveReviewer"
            label="五年项目评论家"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="fiveAuditTime"
            label="五年项目审核时间"
            width="150"
          >
          </el-table-column>
          <el-table-column prop="fiveName" label="五年项目名称" width="150">
          </el-table-column>
          <el-table-column prop="fiveId" label="五年项目标识" width="150">
          </el-table-column>
          <el-table-column
            prop="fiveAuditOpinion"
            label="五年项目审核意见"
            width="150"
          >
          </el-table-column>
        </el-table>
        <div class="block" style="margin-top: 20px; margin-left: 300px">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="userList2.length"
          >
          </el-pagination></div
      ></el-tab-pane>

      <el-tab-pane label="三年项目信息公示" name="third">
        <span>
          项目类型：<input
            type="text"
            v-model="searchType3"
            placeholder="请输入项目类型"
            style="width: 300px; height: 30px; margin-right: 50px"
          />
          项目编号：<input
            type="text"
            v-model="searchNo3"
            placeholder="请输入项目编号"
            style="width: 300px; height: 30px; margin-right: 50px"
          />
          <el-button type="primary" size="medium" @click="btnS3"
            >搜索</el-button
          >
        </span>
        <el-table
          class="el-table--scrollable-y"
          :data="
            userList3.slice(
              (currentPage - 1) * pagesize,
              currentPage * pagesize
            )
          "
          style="width: 100%; height=250;"
        >
          <el-table-column
            fixed
            prop="threeProjectNo"
            label="三年项目编号"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="threeProjectType"
            label="三年项目类型"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="threeSpecificType"
            label="三年项目特定类型"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="threeInvestment"
            label="三年项目投资"
            width="150"
          >
          </el-table-column>
          <el-table-column prop="threeRevenue" label="三年项目收益" width="150">
          </el-table-column>
          <el-table-column
            prop="threeStartTime"
            label="三年项目开始时间"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="threeLifeCycle"
            label="三年项目生命周期"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="threeProjectAddress"
            label="三年项目地址"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="threeProjectAssignmentPaper"
            label="三年项目任务书"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="threeRevenueAnalysis"
            label="三年项目收益分析"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="threeConstructionStatus"
            label="三年项目创建身份"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="threeReviewer"
            label="三年项目评论家"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="threeAuditTime"
            label="三年项目审核时间"
            width="150"
          ></el-table-column>
          <el-table-column prop="three_name" label="三年项目名称" width="150">
          </el-table-column>
          <el-table-column prop="three_id" label="三年项目标识" width="150">
          </el-table-column>
          <el-table-column
            prop="threeAuditOpinion"
            label="三年项目审核意见"
            width="150"
          >
          </el-table-column>
        </el-table>
        <div class="block" style="margin-top: 20px; margin-left: 300px">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="userList3.length"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  data() {
    return {
      currentPage: 1, //初始页
      searchName: "", //搜索框
      searchNo: "",
      searchType2: "", //搜索框
      searchNo2: "",
      searchType3: "", //搜索框
      searchNo3: "",
      pagesize: 5, //    每页的数据
      activeName: "",
      userList1: [
        // projectNo:'',
        // enterpriseId:'',
        // projectType:'',
        // investment:'',
        // revenue:'',
        // startTime:'',
        // lifeCycle:'',
        // projectAssignmentPaper:'',
        // specificType:'',
        // projectAddress:'',
        // auditStatus:'',
        // reviewer:'',
        // revenueAnalysis:'',
        // auditTime:'',
        // applyName:'',
        // auditOpinion:'',
      ],
      userList2: [
        // fiveProjectNo:'',
        // fiveProjectType:'',
        // fiveSpecificType:'',
        // fiveInvestment:'',
        // fiveStartTime:'',
        // fiveLifeCycle:'',
        // fiveProjectAddress:'',
        // fiveProjectAssignmentPaper:'',
        // fiveRevenueAnalysis:'',
        // fiveConstructionStatus:'',
        // fiveReviewer:'',
        // fiveAuditTime:'',
        // fiveAuditOpinion:'',
      ],
      userList3: [
        // threeProjectNo:'',
        // threeProjectType:'',
        // threeSpecificType:'',
        // threeInvestment:'',
        // threeStartTime:'',
        // threeLifeCycle:'',
        // threeProjectAddress:'',
        // threeProjectAssignmentPaper:'',
        // threeRevenueAnalysis:'',
        // threeConstructionStatus:'',
        // threeReviewer:'',
        // threeAuditTime:'',
        // threeAuditOpinion:'',
      ],
    };
  },
  methods: {
    async btnS() {
      await this.$http
        .get("/apply/queryList", {
          params: { projectNo: this.searchNo, applyName: this.searchName },
        })
        .then((result) => {
          this.userList1 = result.data.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    async btnS2() {
      await this.$http
        .get("/five/queryList", {
          params: {
            fiveProjectNo: this.searchNo2,
            fiveProjectType: this.searchType2,
          },
        })
        .then((result) => {
          this.userList2 = result.data.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    async btnS3() {
      await this.$http
        .get("/three/queryList", {
          params: {
            threeProjectNo: this.searchNo3,
            threeProjectType: this.searchType3,
          },
        })
        .then((result) => {
          this.userList3 = result.data.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    handleClick() {},
  },
  mounted() {
    this.$http
      .get("/apply/queryList")
      .then((response) => {
        console.log(response);
        this.userList1 = response.data.data.data;
      })
      .catch(function (error) {
        // 请求失败处理
        console.log(error);
      });

    this.$http
      .get("/five/queryList")
      .then((response) => {
        console.log(response);
        this.userList2 = response.data.data.data;
      })
      .catch(function (error) {
        // 请求失败处理
        console.log(error);
      });

    this.$http
      .get("/three/queryList")
      .then((response) => {
        console.log(response);
        this.userList3 = response.data.data.data;
      })
      .catch(function (error) {
        // 请求失败处理
        console.log(error);
      });
  },
};
</script>
<style>
.el-table__body-wrapper {
  height: 400px;
}
</style>